<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script><!-- Popper JS -->
<script src="assets/layui/lay/modules/layer.js"></script>
<link rel="stylesheet" href="assets/layui/css/modules/layer/default/layer.css"><!-- Modernizer JS -->
<script src="component/js/head.js"></script>
<%--登录后id保存到js全局变量中--%>
<script>
    let userId = 0;
</script>
<%--如果用户登录了--%>
<c:if test="${user!=null}">
<script>
    userId = ${user.userId};
    console.log("asd"+userId)
</script>
</c:if>

<header id="head" class="header-area sticky-bar">
    <div class="main-header-wrap">
        <div class="container">
            <div class="row">
                <div class="col-xl-2 col-lg-2">
                    <div class="logo pt-40"><a href="index.html"><img src="assets/img/logo/logo.png" alt=""></a>
                    </div>
                </div>
                <div class="col-xl-7 col-lg-7 ">
                    <div class="main-menu">
                        <nav>
                            <ul>
                                <!-- 主页 -->
                                <li class="angle-shape"><a href="index.jsp">主页</a></li>

                                <!-- 商城 -->
                                <li class="angle-shape"><a href="/furniture/shop">商城<span>new</span></a>
                                    <ul class="mega-menu">
                                        <!-- 商城内第一行 -->
                                        <li><a class="menu-title" href="#">小型家具</a>
                                            <ul>
                                                <li><a href="shop.html">standard style</a></li>
                                                <li><a href="shop-grid-2-column.html">grid 2 column</a></li>
                                                <li><a href="shop-grid-4-column.html">grid 4 column</a></li>
                                                <li><a href="shop-grid-fullwide.html">grid full wide</a></li>
                                                <li><a href="shop-right-sidebar.html">grid right sidebar </a></li>
                                            </ul>
                                        </li>
                                        <!-- 商城内第二行 -->
                                        <li><a class="menu-title" href="#">大型家具</a>
                                            <ul>
                                                <li><a href="shop-list-style1.html">list style 1</a></li>
                                                <li><a href="shop-list-style2.html">list style 2</a></li>
                                                <li><a href="shop-list-style3.html">list style 3</a></li>
                                                <li><a href="shop-list-fullwide.html">list full wide</a></li>
                                                <li><a href="shop-list-sidebar.html">list with sidebar </a></li>
                                            </ul>
                                        </li>
                                        <!-- 商城内第二行 -->
                                        <li><a class="menu-title" href="#">Product Details</a>
                                            <ul>
                                                <li><a href="product-details.html">tab style 1</a></li>
                                                <li><a href="product-details-tab-2.html">tab style 2</a></li>
                                                <li><a href="product-details-tab-3.html">tab style 3</a></li>
                                                <li><a href="product-details-gallery.html">gallery style </a></li>
                                                <li><a href="product-details-gallery-right.html">gallery right</a>
                                                </li>
                                            </ul>
                                        </li>


                                        <!-- 商城内第二行 -->
                                        <li><a class="menu-title" href="#">Product Details</a>
                                            <ul>
                                                <li><a href="product-details-sticky.html">sticky style</a></li>
                                                <li><a href="product-details-sticky-right.html">sticky right</a>
                                                </li>
                                                <li><a href="product-details-slider-box.html">slider style</a></li>
                                                <li><a href="product-details-affiliate.html">Affiliate style</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>

                                <li><a href="/furniture/shop">商品列表 <span>hot</span></a></li>

                                <li><a href="contact-us.html">意见与建议 </a></li>

                                <li class="angle-shape"><a href="#">帮助信息</a>
                                    <ul class="submenu">
                                        <li><a href="about-us.html">关于我们 </a></li>
                                        <li><a href="cart-page.html">购物车 </a></li>
                                        <li><a href="checkout.html">结算 </a></li>
                                        <li><a href="compare-page.html">评价商品 </a></li>
                                        <li><a href="wishlist.html">愿望单 </a></li>
                                        <li><a href="my-account.html">我的 </a></li>
                                        <li><a href="contact-us.html">联系我们 </a></li>
                                        <li><a href="login-register.html">登录 </a></li>
                                    </ul>
                                </li>

                            </ul>
                        </nav>
                    </div>
                </div>


                <div class="col-xl-3 col-lg-3">

                    <div class="header-right-wrap pt-40">
                        <c:if test="${user!=null}">
                            <p style="margin-bottom: 20px">欢迎您：${user.username}</p>
                        </c:if>
                        <!-- 搜索框 -->
                        <div class="header-search"><a class="search-active" href="#"><i
                                class="sli sli-magnifier"></i></a></div>
                        <%--                        todo--%>

                        <c:if test="${user!=null}">
                            <div class="cart-wrap">

                                <!-- 购物车结算 -->
                                <button class="icon-cart-active"><span class="icon-cart"><i
                                        class="sli sli-bag"></i><span class="count-style">{{totalNum}}</span></span>$<span
                                        class="cart-price">                                        {{total}}</span>
                                </button>

                                <!--  弹出所选物品 -->
                                <div class="shopping-cart-content">
                                    <div class="shopping-cart-top"><h4>Shoping Cart</h4><a class="cart-close"
                                                                                           href="#"><i
                                            class="sli sli-close"></i></a></div>
                                    <ul style="height: 380px">
                                        <li v-for="(item,index) in car" class="single-shopping-cart">
                                            <div class="shopping-cart-img"><a href="#"><img alt=""
                                                                                            :src="item.furnitureImg"></a>
                                                <div class="item-close"><div @click="deleteCar(index)"><i class="sli sli-close"></i></div>
                                                </div>
                                            </div>
                                            <div class="shopping-cart-title"><h4><a href="#">{{item.furnitureName}} </a></h4>
                                                <span>{{item.number}} x {{item.price}}</span>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="shopping-cart-bottom">
                                        <div class="shopping-cart-total"><h4>Total : <span
                                                class="shop-total">$ {{total}}</span></h4></div>
                                        <div class="shopping-cart-btn btn-hover text-center"><a class="default-btn"
                                                                                                href="javascript:void(0)" @click="checkout()">checkout</a><a
                                                class="default-btn" href="cart-page.html">view cart</a></div>
                                    </div>
                                </div>
                            </div>
                        </c:if>

                        <!-- 设置按键 -->
                        <div class="setting-wrap">
                            <button class="setting-active"><i class="sli sli-settings"></i></button>
                            <div class="setting-content">
                                <ul>
                                    <li><h4>货币</h4>
                                        <ul>
                                            <li><a href="#">CNY</a></li>
                                            <li><a href="#">USD</a></li>
                                            <li><a href="#">Euro</a></li>
                                        </ul>
                                    </li>
                                    <li><h4>语言</h4>
                                        <ul>
                                            <li><a href="#">中文</a></li>
                                            <li><a href="#">English</a></li>
                                            <li><a href="#">Spanish</a></li>
                                        </ul>
                                    </li>
                                    <li><h4>账户</h4>
                                        <ul>
                                            <li><a href="login-register.jsp">登录账户</a></li>
                                            <li><a href="login-register.jsp">注册账户</a></li>
                                            <li><a href="${path}/toMyAccount">我的</a></li>
                                            <c:if test="${user!=null}"> <li><a href="${path}/user/loginOut">注销</a></li></c:if>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- main-search start -->
        <div class="main-search-active">
            <div class="sidebar-search-icon">
                <button class="search-close"><span class="sli sli-close"></span></button>
            </div>
            <div class="sidebar-search-input">
                <form>
                    <div class="form-search"><input id="search" class="input-text" value="" placeholder="Search Now"
                                                    type="search"/>
                        <button><i class="sli sli-magnifier"></i></button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="header-small-mobile">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-6">
                    <div class="mobile-logo"><a href="index.html"><img alt="" src="assets/img/logo/logo.png"></a>
                    </div>
                </div>
                <div class="col-6">
                    <div class="header-right-wrap">
                        <div id="cart" class="cart-wrap">
                            <button class="icon-cart-active"><span class="icon-cart"><i
                                    class="sli sli-bag"></i><span class="count-style">02</span></span><span
                                    class="cart-price">{{total}}</span>
                            </button>
                            <div class="shopping-cart-content">
                                <div class="shopping-cart-top"><h4>Shoping Cart</h4><a class="cart-close"
                                                                                       href="#"><i
                                        class="sli sli-close"></i></a></div>
                                <ul >
                                    <li class="single-shopping-cart">
                                        <div class="shopping-cart-img"><a href="#"><img alt=""
                                                                                        src="assets/img/cart/cart-1.jpg"></a>
                                        </div>
                                        <div class="shopping-cart-title"><h4><a href="#">Product Name </a></h4>
                                            <span>1 x 90.00</span></div>
                                    </li>
                                    <li class="single-shopping-cart">
                                        <div class="shopping-cart-img"><a href="#"><img alt=""
                                                                                        src="assets/img/cart/cart-2.jpg"></a>
                                        </div>
                                        <div class="shopping-cart-title"><h4><a href="#">Product Name</a></h4><span>1 x 90.00</span>
                                        </div>
                                    </li>
                                </ul>
                                <div class="shopping-cart-bottom">
                                    <div class="shopping-cart-total"><h4>Total : <span
                                            class="shop-total">$260.00</span></h4></div>
                                    <div class="shopping-cart-btn btn-hover text-center"><a class="default-btn"
                                                                                            href="checkout.html">checkout</a><a
                                            class="default-btn" href="cart-page.html">view cart</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="mobile-off-canvas"><a class="mobile-aside-button" href="#"><i
                                class="sli sli-menu"></i></a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="mobile-off-canvas-active"><a class="mobile-aside-close"><i class="sli sli-close"></i></a>
    <div class="header-mobile-aside-wrap">
        <div class="mobile-search">
            <form class="search-form" action="#"><input type="text" placeholder="Search entire storeâ¦">
                <button class="button-search"><i class="sli sli-magnifier"></i></button>
            </form>
        </div>

        <div class="mobile-menu-wrap"><!-- mobile menu start -->
            <div class="mobile-navigation"><!-- mobile menu navigation start -->
                <nav>
                    <ul class="mobile-menu">
                        <li class="menu-item-has-children"><a href="index.html">主页</a></li>

                        <li class="menu-item-has-children "><a href="shop.html">商城</a>
                            <ul class="dropdown">
                                <li class="menu-item-has-children"><a href="#">小型家具</a>
                                    <ul class="dropdown">
                                        <li><a href="shop.html">standard style</a></li>
                                        <li><a href="shop-grid-2-column.html">grid 2 column</a></li>
                                        <li><a href="shop-grid-4-column.html">grid 4 column</a></li>
                                        <li><a href="shop-grid-fullwide.html">grid full wide</a></li>
                                        <li><a href="shop-right-sidebar.html">grid right sidebar </a></li>
                                        <li><a href="shop-list-style1.html">list style 1</a></li>
                                        <li><a href="shop-list-style2.html">list style 2</a></li>
                                        <li><a href="shop-list-style3.html">list style 3</a></li>
                                        <li><a href="shop-list-fullwide.html">list full wide</a></li>
                                        <li><a href="shop-list-sidebar.html">list with sidebar </a></li>
                                    </ul>
                                </li>
                                <li class="menu-item-has-children"><a href="#">大型家具</a>
                                    <ul class="dropdown">
                                        <li><a href="product-details.html">tab style 1</a></li>
                                        <li><a href="product-details-tab-2.html">tab style 2</a></li>
                                        <li><a href="product-details-tab-3.html">tab style 3</a></li>
                                        <li><a href="product-details-gallery.html">gallery style </a></li>
                                        <li><a href="product-details-gallery-right.html">gallery right</a></li>
                                        <li><a href="product-details-sticky.html">sticky style</a></li>
                                        <li><a href="product-details-sticky-right.html">sticky right</a></li>
                                        <li><a href="product-details-slider-box.html">slider style</a></li>
                                        <li><a href="product-details-affiliate.html">Affiliate style</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="shop.html">Accessories </a></li>
                        <li class="menu-item-has-children"><a href="#">pages</a>
                            <ul class="dropdown">
                                <li><a href="about-us.html">about us </a></li>
                                <li><a href="cart-page.html">cart page </a></li>
                                <li><a href="checkout.html">checkout </a></li>
                                <li><a href="compare-page.html">compare </a></li>
                                <li><a href="wishlist.html">wishlist </a></li>
                                <li><a href="my-account.html">my account </a></li>
                                <li><a href="contact-us.html">contact us </a></li>
                                <li><a href="login-register.html">login/register </a></li>
                            </ul>
                        </li>
                        <li class="menu-item-has-children "><a href="blog.html">Blog</a>
                            <ul class="dropdown">
                                <li><a href="blog.html">standard style </a></li>
                                <li><a href="blog-2-col.html">blog 2 column </a></li>
                                <li><a href="blog-3-col.html">blog 3 column </a></li>
                                <li><a href="blog-right-sidebar.html">blog right sidebar </a></li>
                                <li><a href="blog-details.html">blog details </a></li>
                                <li><a href="blog-details-right-sidebar.html">blog details right sidebar </a></li>
                            </ul>
                        </li>
                        <li><a href="contact-us.html">Contact us</a></li>
                    </ul>
                </nav><!-- mobile menu navigation end --></div><!-- mobile menu end --></div>
        <div class="mobile-curr-lang-wrap">
            <div class="single-mobile-curr-lang"><a class="mobile-language-active" href="#">Language <i
                    class="sli sli-arrow-down"></i></a>
                <div class="lang-curr-dropdown lang-dropdown-active">
                    <ul>
                        <li><a href="#">English (US)</a></li>
                        <li><a href="#">English (UK)</a></li>
                        <li><a href="#">Spanish</a></li>
                    </ul>
                </div>
            </div>
            <div class="single-mobile-curr-lang"><a class="mobile-currency-active" href="#">Currency <i
                    class="sli sli-arrow-down"></i></a>
                <div class="lang-curr-dropdown curr-dropdown-active">
                    <ul>
                        <li><a href="#">USD</a></li>
                        <li><a href="#">EUR</a></li>
                        <li><a href="#">Real</a></li>
                        <li><a href="#">BDT</a></li>
                    </ul>
                </div>
            </div>
            <div class="single-mobile-curr-lang"><a class="mobile-account-active" href="#">My Account <i
                    class="sli sli-arrow-down"></i></a>
                <div class="lang-curr-dropdown account-dropdown-active">
                    <ul>
                        <li><a href="login-register.html">Login</a></li>
                        <li><a href="login-register.html">Creat Account</a></li>
                        <li><a href="my-account.html">My Account</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="mobile-social-wrap"><a class="facebook" href="#"><i class="sli sli-social-facebook"></i></a><a
                class="twitter" href="#"><i class="sli sli-social-twitter"></i></a><a class="pinterest" href="#"><i
                class="sli sli-social-pinterest"></i></a><a class="instagram" href="#"><i
                class="sli sli-social-instagram"></i></a><a class="google" href="#"><i
                class="sli sli-social-google"></i></a></div>
    </div>
</div>

<!-- 移动端 -->
<div class="mobile-off-canvas-active"><a class="mobile-aside-close"><i class="sli sli-close"></i></a>
    <div class="header-mobile-aside-wrap">
        <div class="mobile-search">
            <form class="search-form" action="#"><input type="text" placeholder="Search entire storeâ¦">
                <button class="button-search"><i class="sli sli-magnifier"></i></button>
            </form>
        </div>
        <div class="mobile-menu-wrap"><!-- mobile menu start -->
            <div class="mobile-navigation"><!-- mobile menu navigation start -->
                <nav>
                    <ul class="mobile-menu">
                        <li class="menu-item-has-children"><a href="index.jsp">首页</a></li>
                        <li class="menu-item-has-children "><a href="shop.html">商品</a>
                            <ul class="dropdown">
                                <li class="menu-item-has-children"><a href="#">Shop Layout</a>
                                    <ul class="dropdown">
                                        <li><a href="shop.html">standard style</a></li>
                                        <li><a href="shop-grid-2-column.html">grid 2 column</a></li>
                                        <li><a href="shop-grid-4-column.html">grid 4 column</a></li>
                                        <li><a href="shop-grid-fullwide.html">grid full wide</a></li>
                                        <li><a href="shop-right-sidebar.html">grid right sidebar </a></li>
                                        <li><a href="shop-list-style1.html">list style 1</a></li>
                                        <li><a href="shop-list-style2.html">list style 2</a></li>
                                        <li><a href="shop-list-style3.html">list style 3</a></li>
                                        <li><a href="shop-list-fullwide.html">list full wide</a></li>
                                        <li><a href="shop-list-sidebar.html">list with sidebar </a></li>
                                    </ul>
                                </li>
                                <li class="menu-item-has-children"><a href="#">products details</a>
                                    <ul class="dropdown">
                                        <li><a href="product-details.html">tab style 1</a></li>
                                        <li><a href="product-details-tab-2.html">tab style 2</a></li>
                                        <li><a href="product-details-tab-3.html">tab style 3</a></li>
                                        <li><a href="product-details-gallery.html">gallery style </a></li>
                                        <li><a href="product-details-gallery-right.html">gallery right</a></li>
                                        <li><a href="product-details-sticky.html">sticky style</a></li>
                                        <li><a href="product-details-sticky-right.html">sticky right</a></li>
                                        <li><a href="product-details-slider-box.html">slider style</a></li>
                                        <li><a href="product-details-affiliate.html">Affiliate style</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>

                        <li><a href="shop.html">Accessories </a></li>
                        <li class="menu-item-has-children"><a href="#">pages</a>
                            <ul class="dropdown">
                                <li><a href="about-us.html">about us </a></li>
                                <li><a href="cart-page.html">cart page </a></li>
                                <li><a href="checkout.html">checkout </a></li>
                                <li><a href="compare-page.html">compare </a></li>
                                <li><a href="wishlist.html">wishlist </a></li>
                                <li><a href="my-account.html">my account </a></li>
                                <li><a href="contact-us.html">contact us </a></li>
                                <li><a href="login-register.jsp">login/register </a></li>
                            </ul>
                        </li>
                        <li class="menu-item-has-children "><a href="blog.html">Blog</a>
                            <ul class="dropdown">
                                <li><a href="blog.html">standard style </a></li>
                                <li><a href="blog-2-col.html">blog 2 column </a></li>
                                <li><a href="blog-3-col.html">blog 3 column </a></li>
                                <li><a href="blog-right-sidebar.html">blog right sidebar </a></li>
                                <li><a href="blog-details.html">blog details </a></li>
                                <li><a href="blog-details-right-sidebar.html">blog details right sidebar </a></li>
                            </ul>
                        </li>
                        <li><a href="contact-us.html">Contact us</a></li>
                    </ul>
                </nav><!-- mobile menu navigation end --></div><!-- mobile menu end --></div>
        <div class="mobile-curr-lang-wrap">
            <div class="single-mobile-curr-lang"><a class="mobile-language-active" href="#">Language <i
                    class="sli sli-arrow-down"></i></a>
                <div class="lang-curr-dropdown lang-dropdown-active">
                    <ul>
                        <li><a href="#">English (US)</a></li>
                        <li><a href="#">English (UK)</a></li>
                        <li><a href="#">Spanish</a></li>
                    </ul>
                </div>
            </div>
            <div class="single-mobile-curr-lang"><a class="mobile-currency-active" href="#">Currency <i
                    class="sli sli-arrow-down"></i></a>
                <div class="lang-curr-dropdown curr-dropdown-active">
                    <ul>
                        <li><a href="#">USD</a></li>
                        <li><a href="#">EUR</a></li>
                        <li><a href="#">Real</a></li>
                        <li><a href="#">BDT</a></li>
                    </ul>
                </div>
            </div>
            <div class="single-mobile-curr-lang"><a class="mobile-account-active" href="#">My Account <i
                    class="sli sli-arrow-down"></i></a>
                <div class="lang-curr-dropdown account-dropdown-active">
                    <ul>
                        <li><a href="login-register.jsp">Login</a></li>
                        <li><a href="login-register.jsp">Creat Account</a></li>
                        <li><a href="my-account.html">My Account</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="mobile-social-wrap"><a class="facebook" href="#"><i class="sli sli-social-facebook"></i></a><a
                class="twitter" href="#"><i class="sli sli-social-twitter"></i></a><a class="pinterest" href="#"><i
                class="sli sli-social-pinterest"></i></a><a class="instagram" href="#"><i
                class="sli sli-social-instagram"></i></a><a class="google" href="#"><i
                class="sli sli-social-google"></i></a></div>
    </div>
</div>
<script src=js/head.js></script>
